<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">全选</button>
    <button id="btn">不选</button>
    <button id="btn">反选</button>

    <div></div>
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">
    <input type="checkbox" id="con">

    <script>
        // 先声明button和input的标签合集
        var btn = document.getElementsByTagName('button');
        var con = document.getElementsByTagName('input');

      // 先给每个按钮绑定点击事件
     
          for(var i=0;i<btn.length;i++){
            btn[i].onclick = function(){
              if(this.innerHTML==='全选'){
                  for(var j=0;j<con.length;j++){
                      con[j].checked=true;
                  }
              }
              else if(this.innerHTML==='不选'){
                for(var j=0;j<con.length;j++){
                      con[j].checked=false;
                  }
                }
                else if(this.innerHTML==='反选'){
                    for(var j=0;j<con.length;j++){
                      con[j].checked =!con[j].checked;
                  }
                }
            }
           }

    </script>

</body>
</html>